<script setup>
import {getCurrentInstance ,reactive,ref} from 'vue'
const {proxy} = getCurrentInstance()
const props = defineProps(["loading"])
const banner=reactive([])
 proxy.$https.banner()
 .then(res=>{
  res.data.banners.forEach(val=>{
  banner.push(val)
})
 })

 function fn(){
    ElNotification({
        message: `<div style="display:flex;align-items: center;"><img width='50px' src="http://127.0.0.1:5173/src/assets/OIP-C.jpg"/><span>轮播为静态图片，开发中...</span></div>`,
        showClose: false,
        dangerouslyUseHTMLString:true,
        duration:2000,
        position: 'top-left',
     })
 }
</script>
<template>
    

    <el-skeleton style="width: 1200px" :loading="props.loading" animated>
      <template #template>
        <el-skeleton-item variant="image" style="width: 1200px; height: 240px" />
      </template>
      <template #default>
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item @click="fn" v-for="item in banner" :key="item">
              <img :src="item.imageUrl" alt="">
          </el-carousel-item>
        </el-carousel>
      </template>
    </el-skeleton>
  </template>
  
  <style scoped>

  body{
    margin: 0;
  }
  .el-carousel{
    width: 1200px;
    margin: 0 auto;
  }
  img{
    width: 100%;
    height: 100%;
  }
  </style>
  